<template>
  <div class="public_height100">
    <div class="echarts_parent">
      <div class="echarts">
        <div class="dataOverview_list">
          <div class="flex_space_between">
            <label class="dataOverview_title">品牌总数</label>
            <el-button type="text" class="dataOverview_btn pub_button">
              <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
            </el-button>
          </div>
          <div class="flex_space_between mt10">
            <div class="dataOverview_content_left ">
              <span class="dataOverview_num">{{ dataStatistics.brandQty }}</span>
            </div>
            <img src="@/assets/img/goods/dataOverview_2.png" class="dataOverview_content_img " alt="总品牌数" />
          </div>
        </div>
      </div>
      <div class="echarts">
        <div class="dataOverview_list">
          <div class="flex_space_between">
            <label class="dataOverview_title">产品总数</label>
            <el-button type="text" class="dataOverview_btn pub_button">
              <img src="@/assets/img/orderManagement/dataOverview.png" alt="刷新" />
            </el-button>
          </div>
          <div class="flex_space_between mt10">
            <div class="dataOverview_content_left ">
              <span class="dataOverview_num">{{ dataStatistics.productQty }}</span>
            </div>
            <img src="@/assets/img/goods/dataOverview_1.png" class="dataOverview_content_img " alt="总品牌数" />
          </div>
        </div>
      </div>
    </div>
    <div class="mt15 table_contentParent">
      <div class="table_content hp100">
        <!-- ====== 表格上方的筛选条件 start ======-->
        <div class="table_filter flex_space_between">
          <div class="flex_start ">
            <div class="table_filter_search">
              <el-input v-model="params.commonSearch" class="pub_input pub_input_search" placeholder="请输入品牌名称" clearable @keydown.enter.native="searchBrand" @clear="searchBrand">
                <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
              </el-input>
            </div>
            <div class="table_filter_search ml12 flex_start">
              <el-radio-group v-model="params.commonTag" size="small" @input="getDataList">
                <el-radio-button v-for="item in applyOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
              </el-radio-group>
              <div class="ml12">
                <el-button type="text" class="public_confirm_btn pub_button" @click="searchBrand"> 搜索 </el-button>
              </div>
            </div>
          </div>
          <div class="flex_start flex_end">
            <div v-if="params.commonTag == 2 || (roleType === 1 && params.commonTag == 1)">
              <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="showDilogBtn('addDialogVisible')">
                <img src="@/assets/img/orderManagement/add.png" alt="新增品牌" />
                <span class="ml5">新增品牌</span>
              </el-button>
            </div>
            <div v-if="params.commonTag == 2 || roleType == 1" class="ml12">
              <el-button type="text" class="w108 pub_button pub_buttonRed" @click="delteDataBtn">
                <img src="@/assets/img/orderManagement/delete.png" alt="批量删除" />
                <span class="ml5">批量删除</span>
              </el-button>
            </div>
            <div v-if="roleType === 1 && params.commonTag == 4" class="ml12">
              <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="batchAuitBtn">
                <span class="ml0">批量审核</span>
              </el-button>
            </div>
            <div v-if="roleType == 1" class="ml12">
              <el-button type="text" class="w108 pub_button" @click="downloadFile">
                <img src="@/assets/img/orderManagement/download.png" alt="下载模板" />
                <span class="ml5">下载模板</span>
              </el-button>
            </div>
            <div v-if="roleType == 1" class="ml12">
              <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="#" :on-change="checkFile" :auto-upload="false">
                <el-button type="text" class="w80 pub_button">
                  <img src="@/assets/img/orderManagement/import.png" alt="检查" />
                  <span class="ml5">检查</span>
                </el-button>
              </el-upload>
            </div>
            <div v-if="roleType == 1" class="ml12">
              <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="#" :on-change="uniqueData" :auto-upload="false">
                <el-button type="text" class="w80 pub_button">
                  <img src="@/assets/img/orderManagement/import.png" alt="导入" />
                  <span class="ml5">去重</span>
                </el-button>
              </el-upload>
            </div>
            <div v-if="roleType == 1" class="ml12">
              <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="#" :on-change="uploadGoodsData" :auto-upload="false">
                <el-button type="text" class="w80 pub_button">
                  <img src="@/assets/img/orderManagement/import.png" alt="导入" />
                  <span class="ml5">导入</span>
                </el-button>
              </el-upload>
            </div>
            <div v-if="roleType == 1" class="ml12">
              <el-button type="text" class="w108 pub_button" @click="updataDataBtn">
                <img src="@/assets/img/orderManagement/import.png" alt="更新" />
                <span class="ml5">更新</span>
              </el-button>
            </div>
          </div>
        </div>
        <!-- ====== 表格上方的筛选条件 end ======-->
        <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`calc(100% - ${100 * $f}px)`" class="wp100 mt12" @selection-change="handleSelectionChange">
          <el-table-column v-show="params.commonTag != 1 || roleType == 1" key="selection" type="selection" align="center" :width="`${50 * $f}`" />
          <el-table-column label="品牌名称" show-overflow-tooltip prop="productBrandName" align="center">
            <template slot-scope="{ row }">
              <el-button class="pub_button public_1EB398_btn" type="text" size="mini" @click="lookProdctClick(row)">{{ row.productBrandName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建人" show-overflow-tooltip prop="creatorName" align="center" :width="`${200 * $f}`" />
          <el-table-column label="创建时间" show-overflow-tooltip prop="createTime" align="center" :width="`${360 * $f}`" />
          <el-table-column v-if="params.commonTag == 1" label="公共产品数量" show-overflow-tooltip prop="productQty" align="center" :width="`${200 * $f}`" />
          <el-table-column label="操作" align="center" :width="`${200 * $f}`">
            <template slot-scope="{ row }">
              <el-button class="pub_button public_1EB398_btn" type="text" size="mini" @click="showAddProductDilogBtn(row)">添加产品</el-button>
              <el-button v-if="params.commonTag == 2" type="text" class="pub_button public_1EB398_btn" size="mini" @click="editBtnClick(row)">编辑</el-button>
              <el-button v-if="params.commonTag == 2 || roleType == 1" type="text" class="pub_button public_F16363_btn" size="mini" @click="delBtnClick(row)">删除</el-button>
              <el-button v-if="params.commonTag == 4" type="text" class="pub_button public_1EB398_btn" size="mini" @click="auditBtnClick(row)">审核</el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <PageEmptyData />
          </template>
        </el-table>
        <div ref="pubPageinationRef" class="pub_pageination flex_center mt18">
          <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="params.total" @current-change="changePage" @size-change="changeSize"> </el-pagination>
        </div>
      </div>
    </div>
    <!-- 删除品牌提示 -->
    <deleteDialog :multiple-selection="multipleSelection" :visible="deleteDialogVisible" @close="closeDialog" @submit="confirmDelete" />
    <!-- 审核提示 -->
    <auditDialog :multiple-selection="multipleSelection" :visible="auditDialogVisible" @close="closeDialog" @submit="confirmAudit" />
    <auditDialog :multiple-selection="multipleSelection" :visible="auditProductDialogVisible" @close="closedeleteProductDialog" @submit="confirmAuditProduct" />
    <!-- 删除商品提示 -->
    <deleteDialog :multiple-selection="multipleSelection" :visible="deleteProductDialogVisible" @close="closedeleteProductDialog" @submit="confirmDeleteProduct" />
    <!-- 新增品牌 -->
    <PageDialog :title="addParams.id ? '编辑品牌' : '新增品牌'" :show-apply="showApply" :dialog-visible="addDialogVisible" :width="`${$f * 500}px`" @apply="applyBtnClick" @close="closeDialog" @submit="confirmBrandAdd">
      <el-form ref="ruleForm" :model="addParams" :rules="rules" label-width="5.625rem" class="pub_form_item">
        <el-form-item label="品牌名称" prop="productBrandName">
          <el-input v-model="addParams.productBrandName" placeholder="请输入品牌名称" class="pub_input" :maxlength="10" />
        </el-form-item>
      </el-form>
    </PageDialog>
    <!-- 添加产品 -->
    <PageDialog :show-apply="showProductApply" :title="addProductParams.id ? `新增产品-${productTitle}` : `编辑产品-${productTitle}`" :dialog-visible="addProdcutDialogVisible" :width="`${$f * 500}px`" @apply="applyPorductBtnClick" @close="closeDialog" @submit="confirmAddProduct">
      <el-form ref="ruleForm" :model="addProductParams" :rules="productRules" label-width="5.625rem" class="pub_form_item">
        <el-form-item label="产品货号" prop="productBrandArticleNo">
          <el-input v-model="addProductParams.productBrandArticleNo" placeholder="请输入货号" class="pub_input" :maxlength="15" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productBrandArticleNoName">
          <el-input v-model="addProductParams.productBrandArticleNoName" placeholder="请输入名称" class="pub_input" :maxlength="500" />
        </el-form-item>
        <el-form-item label="税收编码" prop="taxCode">
          <el-select v-model="addProductParams.taxCode" placeholder="请选择税收编码" class="pub_select">
            <el-option v-for="(item, index) in taxCodeColumns" :key="index" :label="item.taxCode" :value="item.taxCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="productSpecificationName">
          <scroll-input v-model="addProductParams.productSpecificationName" placeholder="输入规格名称搜索" :remote-method="fetchSpecification" label-key="username" value-key="id" />
        </el-form-item>
      </el-form>
    </PageDialog>
    <!-- 商品列表 -->
    <PageDialog :title="`产品列表-${productTitle}`" :dialog-visible="prodcutListDialogVisible" :width="`${$f * 1500}px`" :show-footer="false" @close="closeProductDialog">
      <div class="table_filter flex_space_between">
        <div class="flex_start ">
          <div class="table_filter_search">
            <el-input v-model="prodcutParams.commonSearch" class="pub_input pub_input_search" placeholder="请输入货号、产品名称" clearable @keydown.enter.native="handleProductSearch" @clear="handleProductSearch">
              <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
            </el-input>
          </div>
          <div v-if="params.commonTag != 2" class="table_filter_search ml12 flex_start">
            <el-radio-group v-model="prodcutParams.commonTag" size="small" @input="handleProductSearch">
              <el-radio-button v-for="item in applyOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
            <div class=" ml12">
              <el-button type="text" class="public_confirm_btn pub_button" @click="handleProductSearch"> 搜索 </el-button>
            </div>
          </div>
        </div>
        <div class="flex_start flex_end">
          <div v-if="prodcutParams.commonTag == 2 || roleType == 1">
            <el-button type="text" class="w108 pub_button pub_buttonRed" @click="delteProdcutDataBtn">
              <img src="@/assets/img/orderManagement/delete.png" alt="批量删除" />
              <span class="ml5">批量删除</span>
            </el-button>
          </div>
          <div v-if="roleType === 1 && prodcutParams.commonTag === 4" class="ml12">
            <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="auditProdcutDataBtn">
              <span class="ml0">批量审核</span>
            </el-button>
          </div>
        </div>
      </div>
      <el-table ref="multipleTable" size="mini" :data="prodcutList" tooltip-effect="dark" border :height="`${397 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
        <el-table-column v-if="prodcutParams.commonTag != 1 || roleType == 1" key="prodcutListselection" type="selection" align="center" :width="`${50 * $f}`" />
        <el-table-column label="序号" type="index" :width="`${50 * $f}`" align="center" />
        <el-table-column label="名称" show-overflow-tooltip prop="productBrandArticleNoName" align="center" />
        <el-table-column label="货号" show-overflow-tooltip prop="productBrandArticleNo" align="center" :width="`${160 * $f}`" />
        <el-table-column label="规格" show-overflow-tooltip prop="productSpecificationName" align="center" :width="`${240 * $f}`" />
        <el-table-column label="税收编码" show-overflow-tooltip prop="taxCode" align="center" :width="`${280 * $f}`" />
        <el-table-column v-if="prodcutParams.commonTag != 1 || roleType == 1" key="prodcutListoperation" label="操作" align="center" :width="`${120 * $f}`">
          <template slot-scope="{ row }">
            <el-button v-if="prodcutParams.commonTag == 2" type="text" class="pub_button public_1EB398_btn" size="mini" @click="editProdcutBtnClick(row)">编辑</el-button>
            <el-button v-if="prodcutParams.commonTag == 2 || roleType == 1" type="text" class="pub_button public_F16363_btn" size="mini" @click="delProductBtnClick(row)">删除</el-button>
            <el-button v-if="prodcutParams.commonTag === 4" type="text" class="pub_button public_1EB398_btn " size="mini" @click="auditProductBtnClick(row)">审核</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div v-if="prodcutList.length > 0" class="pub_pageination flex_center mt18">
        <el-pagination background layout="total, prev, pager, next, sizes" :page-size="prodcutParams.pageSize" :page-sizes="[10, 20, 100, 1000, 5000]" :current-page.sync="prodcutParams.pageNum" :total="prodcutParams.total" @current-change="productChangePage" @size-change="productChangeSize" />
      </div>
    </PageDialog>
  </div>
</template>
<script>
// import scrollSelect from '@/components/scrollSelect.vue';
import scrollInput from '@/components/scrollInput.vue';
import tableFun from '@/mixin/tableFun.js';
import exportExcel from './exportExcel.js';
export default {
  components: { scrollInput },
  mixins: [tableFun, exportExcel],
  data() {
    return {
      params: { commonSearch: '', total: 0, commonTag: 1, pageSize: 10, pageNum: 1 },
      addParams: { productBrandName: '' },
      dataStatistics: { brandQty: 0, productQty: 0 },
      deleteProductDialogVisible: false, //删除商品弹窗
      addProdcutDialogVisible: false, //添加产品弹窗
      addProductParams: {
        productBrandName: '', //品牌
        productBrandArticleNo: '', //货号
        productBrandArticleNoName: '', //名称
        taxCode: '', //税收编码
        productSpecificationName: '' //规格
      },
      dbSpecificationList: [], //规格列表
      productTitle: '',
      specificationParams: { pageSize: 10, pageNum: 1, commonSearch: '' },
      loading: null,
      showApply: false,
      showProductApply: false,
      taxCodeColumns: [
        //税收编码
        { taxCode: '生物化学制品-1070307000000000000' },
        { taxCode: '化学原料及化学制品-1070200000000000000' },
        { taxCode: '橡胶制品-1070500000000000000' },
        { taxCode: '塑料制品-1070601000000000000' },
        { taxCode: '玻璃制品-1080110000000000000' },
        { taxCode: '纸及纸制品-1060100000000000000' },
        { taxCode: '金属制品-1080400000000000000' },
        { taxCode: '技术陶瓷制品-1080120000000000000' },
        { taxCode: '分析仪器及装置-1090605000000000000' },
        { taxCode: '绘图、计算及测量仪器-1090604000000000000' },
        { taxCode: '软件产品-1060301000000000000' },
        { taxCode: '研发和技术服务-3040100000000000000' },
        { taxCode: '文具及类似用品-1060401000000000000' }
      ],
      auditProductDialogVisible: false,
      prodcutListDialogVisible: false, //产品列表弹窗
      prodcutList: [],
      prodcutParams: { commonTag: 1, commonSearch: '', total: 0, pageSize: 10, pageNum: 1 },
      selectedProuctRow: null, //选择的商品数据
      sendUserId: null, //发送邮件ID
      // 表单验证规则
      rules: {
        productBrandName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { max: 10, message: '品牌名称不能超过10个字符', trigger: 'blur' }
        ]
      },
      productRules: {
        productBrandArticleNo: [
          { required: true, message: '请输入货号', trigger: 'blur' },
          { max: 15, message: '货号不能超过15个字符', trigger: 'blur' }
        ],
        productBrandArticleNoName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { max: 500, message: '名称不能超过500个字符', trigger: 'blur' }
        ],
        taxCode: [{ required: true, message: '请选择税收编码', trigger: 'change' }],
        productSpecificationName: [{ required: true, message: '请选择规格', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.getStatisticsInfo(); //商品数量统计
    this.getDbSpecificationData();
    this.initParams();
  },
  methods: {
    //初始化参数
    initParams() {
      const { messageContent, sendUserId } = this.$route.query;
      if (sendUserId && messageContent && this.roleType === 1) {
        this.params.commonSearch = messageContent;
        this.params.commonTag = 4;
      }
      this.getDataList();
    },
    //新增产品弹框中动态获取规格
    async fetchSpecification(params) {
      let res = await this.$api.get(this.$url.productSpecificationAll, params);
      return res;
    },
    //点击批量删除
    delteProdcutDataBtn() {
      if (this.multipleSelection.length === 0) {
        return this.$message.warning('请选择需要删除的数据');
      }
      this.showDilogBtn('deleteProductDialogVisible');
    },
    //点击批量删除
    auditProdcutDataBtn() {
      if (this.multipleSelection.length === 0) {
        return this.$message.warning('请选择需要审核的数据');
      }
      this.showDilogBtn('auditProductDialogVisible');
    },
    //显示删除弹窗
    delProductBtnClick(val) {
      this.selectedProuctRow = JSON.parse(JSON.stringify(val));
      this.showDilogBtn('deleteProductDialogVisible');
    },
    auditProductBtnClick(val) {
      this.selectedProuctRow = JSON.parse(JSON.stringify(val));
      this.showDilogBtn('auditProductDialogVisible');
    },
    //关闭删除商品弹窗
    closedeleteProductDialog() {
      this.selectedProuctRow = null;
      this.multipleSelection = [];
      this.deleteProductDialogVisible = false;
      this.auditProductDialogVisible = false;
    },
    //关闭查看产品弹窗
    closeProductDialog() {
      this.prodcutListDialogVisible = false;
    },
    //关闭弹窗
    closeDialog() {
      this.auditDialogVisible = false;
      this.selectedRow = null;
      this.multipleSelection = [];
      this.addProdcutDialogVisible = false;
      this.addDialogVisible = false;
      this.deleteDialogVisible = false;
      this.addParams = Object.assign({}, this.$options.data().addParams); //重置参数
      this.addProductParams = Object.assign({}, this.$options.data().addProductParams); //重置参数
    },
    //修改页码
    changePage(pageNum) {
      this.params.pageNum = pageNum;
      this.getDataList();
    },
    //修改每页显示的条数
    changeSize(size) {
      this.params.pageSize = size;
      this.params.pageNum = 1;
      this.getDataList();
    },
    //搜索品牌
    searchBrand() {
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.getDataList();
    },
    //获取表格数据
    async getDataList() {
      this.tableData = [];
      let res = await this.$api.get(this.$url.productBrandAll, this.params);
      this.tableData = res.rows;
      this.params.total = res.total;
    },
    //确认品牌添加
    async confirmBrandAdd() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let { id } = this.addParams;
          let url = id ? this.$url.productBrandUpdate : this.$url.productBrandAdd;
          let res = await this.$api.post(url, { ...this.addParams, productBrandName: this.addParams.productBrandName.trim() });
          if (res.code === 200) {
            let selectedRow = JSON.parse(JSON.stringify(this.selectedRow));
            this.closeDialog();
            this.selectedRow = selectedRow;
            this.getDataList();
            this.getStatisticsInfo();
            this.$message.success(id ? '更新成功' : '新增成功');
          } else {
            this.showApply = true;
            this.$message.error(res.msg);
          }
        }
      });
    },
    //加速审批
    async applyBtnClick() {
      await this.$api.post(this.$url.message, { messageTitle: '品牌审批', messageContent: this.addParams.productBrandName, receiveUserId: 1 });
      await this.$api.post(this.$url.sendEmail, { subject: '品牌审批', text: this.addParams.productBrandName });
      this.$message.success('已加急，审批后会走站内信通知');
      this.showApply = false;
      this.closeDialog();
    },
    //确认删除
    async confirmDelete() {
      let res = null;
      if (this.multipleSelection.length > 0 && this.selectedRow === null) {
        let idArr = this.multipleSelection.map(val => val.id);
        res = await this.$api.post(this.$url.productBrandDeleteBatch, idArr);
      } else {
        res = await this.$api.post(this.$url.productBrandDelete, { id: this.selectedRow.id });
      }
      if (res.code === 200) {
        this.$message.success('删除成功');
        this.searchBrand();
        this.getStatisticsInfo();
      } else {
        this.$message.success('删除失败');
      }
      this.closeDialog();
    },
    //消息列表过来的确认审核
    async confirmAudit() {
      let idArr = [];
      let applyContent = null;
      if (this.multipleSelection.length > 0 && this.selectedRow === null) {
        idArr = this.multipleSelection.map(val => val.id);
        applyContent = this.multipleSelection.map(val => val.productBrandName).join(',');
      } else {
        idArr.push(this.selectedRow.id);
        applyContent = this.selectedRow.productBrandName;
      }
      let res = await this.$api.post(this.$url.productBrandAudit, idArr);
      const { messageContent, sendUserId, messageId } = this.$route.query;
      if (sendUserId && applyContent == messageContent) {
        await this.$api.post(this.$url.message, { messageTitle: '品牌审批', messageContent: messageContent + '品牌审核已通过，已纳入公共数据，您可在公共数据中继续添加相关信息', receiveUserId: sendUserId });
        await this.$api.get(this.$url.messageDetail, { id: messageId }); //调用消息详情，即代表已读
        this.$bus.$emit('getRedDotStatus');
      }
      if (res.code === 200) {
        this.$message.success('审核通过');
        this.searchBrand();
      } else {
        this.$message.success('审核失败');
      }
      this.closeDialog();
    },
    //确认删除商品
    async confirmDeleteProduct() {
      let res = null;
      if (this.multipleSelection.length > 0 && this.selectedProuctRow === null) {
        let idArr = this.multipleSelection.map(val => val.id);
        res = await this.$api.post(this.$url.productBrandArticleNoDeleteBatch, idArr);
      } else {
        res = await this.$api.post(this.$url.productDelete, { id: this.selectedProuctRow.id });
      }
      this.closedeleteProductDialog();
      if (res.code === 200) {
        this.$message.success('删除成功');
        this.searchBrand();
        this.handleProductSearch();
      } else {
        this.$message.success('删除失败');
      }
    },
    //确认审核
    async confirmAuditProduct() {
      let idArr = [];
      if (this.multipleSelection.length > 0 && this.selectedRow === null) {
        idArr = this.multipleSelection.map(val => val.id);
      } else {
        idArr.push(this.selectedProuctRow.id);
      }
      let res = await this.$api.post(this.$url.productAudit, idArr);
      this.closedeleteProductDialog();
      if (res.code === 200) {
        this.$message.success('审核通过');
        this.searchBrand();
        this.handleProductSearch();
      } else {
        this.$message.success('审核失败');
      }
    },
    //商品统计
    async getStatisticsInfo() {
      let res = await this.$api.get(this.$url.getStatisticsInfo);
      this.dataStatistics = {
        //数据统计
        brandQty: res.data.brandQty.toLocaleString(),
        productQty: res.data.productQty.toLocaleString()
      };
    },
    //显示添加产品弹窗
    showAddProductDilogBtn(item) {
      this.selectedRow = JSON.parse(JSON.stringify(item));
      this.productTitle = item.productBrandName;
      this.addProdcutDialogVisible = true;
    },
    //编辑产品
    editProdcutBtnClick(item) {
      this.addProductParams = Object.assign({}, item);
      this.addProdcutDialogVisible = true;
    },
    //添加/更新产品
    async confirmAddProduct() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let { id } = this.addProductParams;
          let url = id ? this.$url.productUpdate : this.$url.productAdd;
          let res = await this.$api.post(url, { ...this.addProductParams, productBrandName: this.productTitle });
          if (res.code === 200) {
            this.params = Object.assign({}, this.$options.data().params); //重置参数
            this.addProdcutDialogVisible = false;
            this.$message.success(id ? '更新成功' : '新增成功');
            await this.searchBrand();
            this.prodcutListDialogVisible = false;
          } else {
            this.showProductApply = true;
            this.$message.error(res.msg);
          }
        }
      });
    },
    async applyPorductBtnClick() {
      await this.$api.post(this.$url.message, { messageTitle: '产品审批', messageContent: this.addProductParams.productBrandArticleNoName, receiveUserId: 1 });
      await this.$api.post(this.$url.sendEmail, { subject: '产品审批', text: this.addProductParams.productBrandArticleNoName });
      this.$message.success('已加急，审批后会走站内信通知');
      this.showProductApply = false;
      this.closeDialog();
    },
    //显示商品列表弹窗
    lookProdctClick(row) {
      this.selectedRow = JSON.parse(JSON.stringify(row));
      this.prodcutParams = Object.assign({}, this.$options.data().prodcutParams);
      this.getProductDataList();
    },
    //搜索商品
    handleProductSearch() {
      this.prodcutParams.pageNum = 1;
      this.prodcutParams.pageSize = 10;
      this.getProductDataList();
    },
    //获取商品列表
    async getProductDataList() {
      this.prodcutParams.productBrandName = this.selectedRow.productBrandName;
      if (this.params.commonTag == 2) {
        this.prodcutParams.commonTag = 2;
      }
      let res = await this.$api.get(this.$url.productAll, this.prodcutParams);
      this.prodcutListDialogVisible = true;
      this.productTitle = this.selectedRow.productBrandName;
      this.prodcutList = res.rows;
      this.prodcutParams.total = res.total;
    },
    //修改页码
    productChangePage(pageNum) {
      this.prodcutParams.pageNum = pageNum;
      this.getProductDataList();
    },
    //修改每页显示的条数
    productChangeSize(size) {
      this.prodcutParams.pageSize = size;
      this.prodcutParams.pageNum = 1;
      this.getProductDataList();
    }
  }
};
</script>
<style lang="less" scoped>
.table_contentParent {
  height: calc(100% - 148px);
  border-radius: 16px 16px 16px 16px;
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
}
.echarts_parent {
  width: 100%;
  overflow: hidden;
  .echarts {
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    box-sizing: border-box;
  }
  .echarts {
    width: calc(50% - 8px);
    height: 132px;
    float: left;
    & + .echarts {
      margin-left: 16px;
    }
    .echarts_header {
      font-size: 16px;
      color: #0a0b0d;
    }
  }
  .table_content {
    width: 100%;
    height: calc(100% - 49px);
    padding: 0px;
  }
  .table_filter_search {
    width: 240px;
  }
}
.dataOverview_list {
  box-sizing: border-box;
  & div {
    width: 100%;
    .dataOverview_title {
      font-size: 18px;
      color: #667085;
    }
    .dataOverview_btn {
      width: 32px;
      height: 32px;
    }
    .dataOverview_num {
      font-size: 24px;
      color: #0a0b0d;
      font-weight: 600;
    }
    .dataOverview_trnedDown {
      span {
        font-size: 12px;
        color: #1eb398;
      }
    }
    .dataOverview_trnedDown,
    .dataOverview_trnedUp {
      min-width: 59px;
      height: 20px;
      background: #edfcf9;
      border-radius: 6px 6px 6px 6px;
      padding: 2px 4px;
      box-sizing: border-box;
      span {
        font-size: 12px;
        color: #1eb398;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    .dataOverview_trnedDown {
      background: #fef0f0;
      span {
        color: #f16363;
      }
    }
    .dataOverview_trneLabel {
      font-size: 12px;
      color: #667085;
      display: block;
    }
  }
  .dataOverview_content_img {
    width: 398px;
    height: 50px;
  }
}
</style>
